<template>
  <div id="tagProtect">
    <v-header title="标签维护" :saveShow="false" :showDownloadBtn="false"></v-header>
    <div style="padding: 10px; height: calc(100% - 56px); overflow: auto">
      <div style="background-color: #fff; min-height: 100%; padding: 15px">
        <el-form  :model="clientData" ref="clientData" class="demo-form-inline" size="mini" label-position="right" label-width="100px">
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="标签名称" prop="tagName">
                <el-input v-model="clientData.tagName" placeholder="标签名称"></el-input>
              </el-form-item>
              <el-form-item label="标签所属系统" prop="tagSys">
                <el-select v-model="clientData.tagSys" placeholder="标签所属系统" popper-class="zIndex-popper">
                  <el-option v-for="item in sysList" :label="item.sys_name" :value="item.sys_lab" :key="item.sys_lab"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="标签所属大类" prop="tagClass">
                <el-select v-model="clientData.tagClass" placeholder="标签所属系统" popper-class="zIndex-popper">
                  <el-option v-for="item in typeList" :label="item.lab_cns" :value="item.lab_id" :key="item.code_id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="模型类型" prop="tagModleType">
                <el-select v-model="clientData.tagModleType" placeholder="模型类型" popper-class="zIndex-popper">
                    <el-option label="专家" value="0"></el-option>
                    <el-option label="机器" value="1"></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="有效标志" prop="tagVaildMarl">
                <el-select v-model="clientData.tagVaildMarl" placeholder="有效标志" popper-class="zIndex-popper">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col style="text-align: right">
              <el-form-item>
                <el-button type="primary" @click="qyeryTag">查询</el-button>
                <el-button type="primary" @click="resetForm('clientData')">重置</el-button>
                <el-button type="primary" @click="add">新增标签</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <div style="margin-top: 15px">
              <el-table :data="tagList" border width="100%">
                <el-table-column prop="lab_cns" label="标签名称"></el-table-column>
                <el-table-column prop="sys_lab" :formatter="formatSys" label="标签所属系统"></el-table-column>
                <el-table-column prop="lab_belong_id" :formatter="formatBelong" label="标签所属大类"></el-table-column>
                <el-table-column prop="lab_disp_typ" :formatter="formatDisTyp" label="标签显示类型"></el-table-column>
                <el-table-column prop="is_typ" :formatter="formatTyp" label="模型类型"></el-table-column>
                <el-table-column prop="lab_state" :formatter="formatState" label="有效标志"></el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作">
                  <template slot-scope="scope">
                    <el-button @click="updateTag(scope.row)" type="text" size="small">修改</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <div style="margin-top: 20px" v-if="tagList.length > 0">
          <el-pagination
            :current-page="nowpage"
            @current-change="handleCurrentChange"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      :title="addUpdateControl == 'add' ? '新增标签' : '修改标签'"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width="900px">
      <div style="margin-top: 15px; margin-left: 40px" v-if="addUpdateControl === 'update'">
        <el-form :model="tagProtectForm" class="demo-form-inline" label-width="100px" size="mini">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="标签名称">
                <el-input  v-model="tagProtectForm.tagName" placeholder="标签名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标签所属系统">
                <el-select v-model="tagProtectForm.tagSys" placeholder="标签所属系统" popper-class="zIndex-popper">
                  <el-option v-for="item in sysList" :label="item.sys_name" :value="item.sys_lab" :key="item.sys_lab"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="标签所属大类">
                <el-select v-model="tagProtectForm.tagClass" placeholder="标签所属系统" popper-class="zIndex-popper">
                  <el-option v-for="item in typeList" :label="item.lab_cns" :value="item.lab_id" :key="item.code_id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标签显示类型">
                <el-select v-model="tagProtectForm.tagDisType" placeholder="标签显示类型" popper-class="zIndex-popper">
                    <el-option label="文本" value="0"></el-option>
                    <el-option label="饼状图" value="1"></el-option>
                    <el-option label="柱状图" value="2"></el-option>
                    <el-option label="折线图" value="3"></el-option>
                    <el-option label="雷达图" value="4"></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="模型类型">
                <el-select v-model="tagProtectForm.tagModleType" placeholder="模型类型" popper-class="zIndex-popper">
                    <el-option label="专家" value="0"></el-option>
                    <el-option label="机器" value="1"></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="有效标志">
                <el-select v-model="tagProtectForm.tagVaildMarl" placeholder="有效标志" popper-class="zIndex-popper">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="代码规则">
                <el-select v-model="tagProtectForm.tagRule" placeholder="代码规则" popper-class="zIndex-popper"  @change="ruleChange()">
                    <el-option v-for="item in ruleList" :label="item.code_name_cns" :value="item.code_id" :key="item.code_id"></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col>
              <el-form-item label=" ">
                <el-input type="textarea" :rows="5" :disabled="true" v-model="tagProtectForm.tagSource" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="dialog-footer">
          <span slot="footer">
              <el-button type="primary" size="mini" @click="dialogFormVisible = false" class="dialog-btn">关闭</el-button>
              <el-button  @click="onSubmit" type="primary" size="mini" class="dialog-btn">确定</el-button>
          </span>
        </div>
      </div>
      <div style="margin-top: 15px" v-if="addUpdateControl === 'add'">
        <el-form :model="addTagForm" ref="addTagForm" class="demo-form-inline" :rules="addTagFormTules" label-width="100px" size="mini">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="标签名称" prop="tagName">
                <el-input v-model="addTagForm.tagName" placeholder="标签名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标签所属系统" prop="tagSys">
                <el-select v-model="addTagForm.tagSys" placeholder="标签所属系统" popper-class="zIndex-popper">
                  <el-option v-for="item in sysList" :label="item.sys_name" :value="item.sys_lab" :key="item.sys_lab"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="标签所属大类" prop="tagClass">
                <el-select v-model="addTagForm.tagClass" placeholder="标签所属大类" popper-class="zIndex-popper">
                  <el-option v-for="item in typeList" :label="item.lab_cns" :value="item.lab_id" :key="item.code_id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标签显示类型" prop="tagDisType">
                <el-select v-model="addTagForm.tagDisType" placeholder="标签显示类型" popper-class="zIndex-popper">
                    <el-option label="文本" value="0"></el-option>
                    <el-option label="饼状图" value="1"></el-option>
                    <el-option label="柱状图" value="2"></el-option>
                    <el-option label="折线图" value="3"></el-option>
                    <el-option label="雷达图" value="4"></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="代码规则" prop="tagRule">
                <el-select filterable  @change="ruleChange()" v-model="addTagForm.tagRule" placeholder="代码规则" popper-class="zIndex-popper">
                    <el-option v-for="item in ruleList" :label="item.code_name_cns" :value="item.code_id" :key="item.code_id"></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col>
              <el-form-item prop="tagSource" label=" ">
                <el-input type="textarea" :rows="5" v-model="addTagForm.tagSource" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="dialog-footer">
          <span slot="footer">
              <el-button type="primary" size="mini" @click="resetForm('addTagForm')">重置</el-button>
              <el-button type="primary" size="mini" @click="dialogFormVisible = false">关闭</el-button>
              <el-button type="primary" size="mini" @click="addTag('addTagForm')">确定</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {VHeader} from '../../../components'
  import ajax from '../../../api/ajax/ajax.js'
  import Msg from '../../../assets/js/msg'
  import api from '../../../api/url.js'
  export default {
    components: {
      VHeader
    },
    data () {
      return {
        tagList: [],
        dialogFormVisible: false,
        tagProtectForm: {
          tagID: '',
          tagSys: '',
          tagClass: '',
          tagName: '',
          tagDisType: '',
          tagModleType: '',
          tagSource: '',
          tagRule: '',
          tagVaildMarl: ''
        },
        addTagForm: {
          tagName: '',
          tagSys: '',
          tagClass: '',
          tagSource: '',
          tagDisType: '',
          tagRule: ''
        },
        addTagFormTules: {
          tagName: [
            { required: true, message: '请输入标签名字', trigger: 'blur' }
          ],
          tagSys: [
            { required: true, message: '请选择所属系统', trigger: 'change' }
          ],
          tagClass: [
            { required: true, message: '请选择所属大类', trigger: 'change' }
          ],
          tagDisType: [
            { required: true, message: '请选择标签显示类型', trigger: 'change' }
          ],
          tagRule: [
            { required: true, message: '请选择代码规则', trigger: 'change' }
          ]
        },
        clientData: {
          tagName: '',
          tagSys: '',
          tagClass: '',
          tagDisType: '',
          tagVaildMarl: ''
        },
        ruleList: '',
        sysList: '',
        typeList: '',
        nameList: '', // 规则模糊查询数组
        isdis: true,
        selectedTag: '',
        pageNo: '',
        addUpdateControl: '',
        nowpage: 1,
        total: '',
        inputSearch: '',
        loading: null
        // tagProtectName: '',
        // tagProtectSys: '',
        // tagProtectClass: '',
        // tagProtectType: '',
        // tagProtectModleType: '',
        // tagProtectSouce: '',
        // tagProtectRule: '',
        // tagProtectVaildMarl: ''
      }
    },
    methods: {
      // 点击增加
      add () {
        this.addUpdateControl = 'add'
        this.dialogFormVisible = true
      },
      // 点击修改之后
      updateTag (row) {
        this.addUpdateControl = 'update'
        this.dialogFormVisible = true
        let selectedItem = row
        this.tagProtectForm.tagName = selectedItem.lab_cns
        this.tagProtectForm.tagSys = selectedItem.sys_lab
        this.tagProtectForm.tagClass = selectedItem.lab_belong_id
        this.tagProtectForm.tagRule = selectedItem.code_id
        this.tagProtectForm.tagDisType = selectedItem.lab_disp_typ
        this.tagProtectForm.tagModleType = selectedItem.is_typ
        this.tagProtectForm.tagVaildMarl = selectedItem.lab_state
        this.tagProtectForm.tagSource = selectedItem.rule_str
        this.tagProtectForm.tagID = selectedItem.lab_id
      },
      // 查询带关键字的标签
      qyeryTag () {
        this.nowpage = 1
        let params = {
          sys_lab: this.clientData.tagSys,
          lab_cns: this.clientData.tagName,
          is_typ: this.clientData.tagModleType,
          lab_belong_id: this.clientData.tagClass,
          lab_state: this.clientData.tagVaildMarl,
          pageNo: 1,
          pageSize: 10
        }
        ajax.post(api.QUERY_TAG, params)
          .then(res => {
            this.loading.close()
            if (res.data.list.length === 0) {
              Msg.alert('查询成功，但是没有数据')
              return null
            }
            this.tagList = res.data.list
            this.total = res.data.total
          })
        this.loading = this.$loading({fullscreen: false, target: '#tagProtect'})
      },
      resetForm (formName) {
        // this.clientData = {
        //   tagName: '',
        //   tagSys: '',
        //   tagClass: '',
        //   tagDisType: '',
        //   tagVaildMarl: ''
        // }
        // this.$refs[formName].clearValidate()
        this.$refs[formName].resetFields()
      },
      // 系统格式方法
      formatSys (row, column) {
        let val
        switch (row.sys_lab) {
          case 'G':
            val = '用户画像'
            break
          default:
            break
        }
        return val
      },
      // 标签所属大类格式方法
      formatBelong (row, column) {
        let val
        switch (row.lab_belong_id) {
          case 'C01':
            val = '用户标签'
            break
          case 'C02':
            val = '应用标签'
            break
          case 'C03':
            val = '金融标签'
            break
          case 'C04':
            val = '产品标签'
            break
          default:
            break
        }
        return val
      },
      formatDisTyp (row, column) {
        let val
        switch (row.lab_disp_typ) {
          case '0':
            val = '文本'
            break
          case '1':
            val = '饼状图'
            break
          case '2':
            val = '柱状图'
            break
          case '3':
            val = '折线图'
            break
          case '4':
            val = '雷达图'
            break
          default:
            break
        }
        return val
      },
      formatTyp (row, column) {
        return row.is_typ === '0' ? '专家标签' : '机器标签'
      },
      formatState (row, column) {
        return row.lab_state === '1' ? '是' : '否'
      },
      // 查询所有标签
      queryTagList () {
        let params = {
          sys_lab: this.clientData.tagSys,
          lab_cns: this.clientData.tagName,
          is_typ: this.clientData.tagModleType,
          lab_belong_id: this.clientData.tagClass,
          lab_state: this.clientData.tagVaildMarl,
          pageNo: 1,
          pageSize: 10
        }
        ajax.post(api.QUERY_TAGLIST, params)
          .then(res => {
            this.loading.close()
            if (res.data.list.length === 0) {
              Msg.alert('没有查询到数据')
              return null
            }
            this.tagList = res.data.list
            this.total = res.data.total
          })
        this.loading = this.$loading({fullscreen: false, target: '#tagProtect'})
      },
      handleCurrentChange (v) {
        let params = {
          sys_lab: this.clientData.tagSys,
          lab_cns: this.clientData.tagName,
          is_typ: this.clientData.tagModleType,
          lab_belong_id: this.clientData.tagClass,
          lab_state: this.clientData.tagVaildMarl,
          pageNo: v,
          pageSize: 10
        }
        ajax.post(api.QUERY_TAGLIST, params)
          .then(res => {
            this.loading.close()
            if (res.data.list.length === 0) {
              Msg.alert('没有查询到数据')
              return null
            }
            this.tagList = res.data.list
            this.total = res.data.total
          })
        this.loading = this.$loading({fullscreen: false, target: '#tagProtect'})
      },
      // pervChange () {
      //   this.nowpage--
      //   let params = {
      //     pageNo: this.nowpage,
      //     pageSize: 10
      //   }
      //   ajax.post(QUERY_TAGLIST, params)
      //     .then(res => {
      //       this.tagList = res.data.list
      //       this.total = res.data.total
      //     })
      // },
      // nextChange () {
      //   this.nowpage++
      //   let params = {
      //     pageNo: this.nowpage,
      //     pageSize: 10
      //   }
      //   ajax.post(QUERY_TAGLIST, params)
      //     .then(res => {
      //       this.tagList = res.data.list
      //       this.total = res.data.total
      //     })
      // },
      // 更新标签
      onSubmit () {
        let params = {
          lab_cns: this.tagProtectForm.tagName,
          sys_lab: this.tagProtectForm.tagSys,
          lab_belong_id: this.tagProtectForm.tagClass,
          code_id: this.tagProtectForm.tagRule,
          lab_disp_typ: this.tagProtectForm.tagDisType,
          is_typ: this.tagProtectForm.tagModleType,
          lab_state: this.tagProtectForm.tagVaildMarl,
          lab_id: this.tagProtectForm.tagID
        }
        ajax.post(api.UPDATE_TAGS, params)
          .then(res => {
            this.dialogFormVisible = false
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.queryTagList()
          })
      },
      ruleChange () {
        let params = {
          code_id: this.addTagForm.tagRule
        }
        ajax.post(api.QUERY_RULE_DETAILED, params)
          .then(res => {
            this.addTagForm.tagSource = res.data
          })
      },
      //  查询下拉列表条件
      queryDropDownList () {
        ajax.post(api.SELECT_TAG_QUERY)
          .then(res => {
            this.ruleList = res.data.rule_list
            this.sysList = res.data.sys_list
            this.typeList = res.data.typ_list
            this.ruleQueryList = res.data.rule_list.map(item => item.code_name_cns).map(item => {
              return {value: item, label: item}
            })
          })
      },
      // 新增标签
      addTag (formName) {
         this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {
            lab_cns: this.addTagForm.tagName,
            sys_lab: this.addTagForm.tagSys,
            lab_belong_id: this.addTagForm.tagClass,
            code_id: this.addTagForm.tagRule,
            lab_disp_typ: this.addTagForm.tagDisType
          }
          ajax.post(api.ADD_TAGS, params)
            .then(res => {
              this.dialogFormVisible = false
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.queryTagList()
            })
            .catch(err => {
              this.$message({
                message: '新增失败' + err,
                type: 'warning'
              })
            })
          } else {
            return false
          }
        })
      },
      // 模糊搜索
      // remoteMethod (query) {
      //   if (query !== '') {
      //     this.loading = true
      //     let params = {
      //       lab_cns: query
      //     }
      //     ajax.post(REMOTE_SEARCH, params)
      //       .then(res => {
      //         this.loading = false
      //         this.nameList = res.data.map(item => item.lab_cns)
      //         this.selectedTag = res.data
      //       })
      //   } else {
      //     this.nameList = []
      //   }
      // },
      nameChange () {
        let selectedItem
        selectedItem = this.selectedTag.filter(item => item.lab_cns === this.tagProtectForm.tagName)
        this.tagProtectForm.tagName = selectedItem[0].lab_cns
        this.tagProtectForm.tagSys = selectedItem[0].sys_lab
        this.tagProtectForm.tagClass = selectedItem[0].lab_belong_id
        this.tagProtectForm.tagRule = selectedItem[0].code_id
        this.tagProtectForm.tagDisType = selectedItem[0].lab_disp_typ
        this.tagProtectForm.tagModleType = selectedItem[0].is_typ
        this.tagProtectForm.tagVaildMarl = selectedItem[0].lab_state
        this.tagProtectForm.tagSource = selectedItem[0].rule_str
        this.tagProtectForm.tagID = selectedItem[0].lab_id
        this.isdis = false
      }
    },
    mounted () {
      this.queryTagList()
      this.queryDropDownList()
    }
  }
</script>
<style lang="stylus" scoped>
  #tagProtect
    height 100%
    .demo-form-inline
      .el-input, .el-select, .el-input__inner
        display block
        width 100%
    .dialog-footer
      padding 20px 30px 10px 10px
      text-align right
</style>
